<script setup>

import axios from 'axios';
import { onMounted, ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { UploadFilled } from '@element-plus/icons-vue';
const handleSuccess = (data) => {
    console.log(data);
}
const viewData = ref([]);
const para = ref({
    employeeNum: null,
    time: [],
    beginTime: null,
    endTime: null,
    time2: [],
    beginTime2: null,
    endTime2: null
});

const headers = {
    Authorization: localStorage.getItem("token")
};

const obj = ref({
    employeeNum: null,
    beginTime: null,
    endTime: null,
    time: [],
    late: null,
    leaveEarly: null,
    absence: null,
    leaveNum: null,
    travelNum: null,
    overtime: null,
    workNum: null
});

const isUpdate = ref(false);
const showDialog = ref(false);
const pageInfo = reactive({
    pageNum: 1,
    pageSize: 5,
    total: 0
});

let getList = () => {
    axios({
        method: "POST",
        url: `/api/attendance/list`,
        data: {
            beginTime: (para.value.time && para.value.time.length > 0) ? para.value.time[0] : null,
            endTime: (para.value.time && para.value.time.length > 1) ? para.value.time[1] : null,
            employeeNum: para.value.employeeNum,
            beginTime2: (para.value.time2 && para.value.time2.length > 0) ? para.value.time2[0] : null,
            endTime2: (para.value.time2 && para.value.time2.length > 1) ? para.value.time2[1] : null,
            ...pageInfo
        }
    }).then((resp) => {
        if (resp.data.code === 200) {
            viewData.value = resp.data.data.list;
            pageInfo.total = resp.data.data.count ? resp.data.data.count : 0;
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    })
};

const addobj = () => {
    obj.value.employeeNum = null;
    obj.value.time = null;
    obj.value.late = null;
    obj.value.leaveEarly = null;
    obj.value.absence = null;
    obj.value.travelNum = null;
    obj.value.leaveNum = null;
    obj.value.overtime = null;

    showDialog.value = true;
};

const handleDelete = (row) => {
    axios({
        method: "DELETE",
        url: "/api/attendance/delete/" + row.id
    }).then((resp) => {
        if (resp.data.code === 200) {
            getList();
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    });
};

const handleUpdate = (row) => {
    obj.value.employeeNum = row.employeeNum;
    obj.value.time[0] = row.beginTime;
    obj.value.time[1] = row.endTime;
    obj.value.late = row.late;
    obj.value.leaveEarly = row.leaveEarly;
    obj.value.absence = row.absence;
    obj.value.travelNum = row.travelNum;
    obj.value.leaveNum = row.leaveNum;
    obj.value.overtime = row.overtime;
    obj.value.workNum = row.workNum;
    obj.value.id = row.id;

    isUpdate.value = true;
    showDialog.value = true;
};

const selectobj = () => {
    getList();
};


const submitData = () => {

    obj.value.beginTime = obj.value.time[0];
    obj.value.endTime = obj.value.time[1];
    const axiosPara = {
        data: obj.value
    };

    if (isUpdate.value) {
        axiosPara.method = "PATCH";
        axiosPara.url = "/api/attendance/update";
    } else {
        axiosPara.method = "POST";
        axiosPara.url = "/api/attendance/add";
    }

    axios(axiosPara).then((resp) => {
        if (resp.data.code === 200) {
            showDialog.value = false;
            getList();
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    });

};

onMounted(() => {
    getList();
});
</script>

<template>
    <div>
        <header class="header">
            <div class="wrapper">
                <div>
                    <span>员工编号:</span>
                    <el-input v-model="para.employeeNum" size="small"></el-input>
                </div>
                <div class="s-block">
                    <span class="s-demonstration">起始时间</span>
                    <el-date-picker v-model="para.time" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange"
                        placeholder="Select date and time" size="small" />
                </div>
                <div class="s-block">
                    <span class="s-demonstration">结束时间</span>
                    <el-date-picker v-model="para.time2" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange"
                        placeholder="Select date and time" size="small" />
                </div>
            </div>
            <div class="w-button">
                <el-button @click="selectobj">查询</el-button>
                <el-button @click="addobj">新增</el-button>
                <el-upload class="upload-demo" action="/api/attendance/uploadAttendance" :headers="headers"
                    :on-success="handleSuccess" multiple>
                    <el-button type="primary">上传</el-button>
                </el-upload>
            </div>
        </header>

        <main>
            <el-table :data="viewData">
                <el-table-column prop="employeeNum" label="员工编号"></el-table-column>
                <el-table-column prop="beginTime" label="起始时间"></el-table-column>
                <el-table-column prop="endTime" label="结束时间"></el-table-column>
                <el-table-column prop="late" label="迟到次数"></el-table-column>
                <el-table-column prop="leaveEarly" label="早退次数"></el-table-column>
                <el-table-column prop="absence" label="缺勤次数"></el-table-column>
                <el-table-column prop="travelNum" label="出差次数"></el-table-column>
                <el-table-column prop="leaveNum" label="请假次数"></el-table-column>
                <el-table-column prop="workNum" label="出勤次数"></el-table-column>
                <el-table-column prop="overtime" label="加班时长"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="handleUpdate(scope.row)">修改</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </main>

        <footer>
            <el-pagination v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
                :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
                @size-change="getList" @current-change="getList" />
        </footer>

        <el-dialog v-model="showDialog">
            <div class="block">
                <span class="s-demonstration">统计时间</span>
                <el-date-picker v-model="obj.time" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange"
                    placeholder="Select date and time" size="small" class="pick" />
            </div>
            <div>
                <span>员工编号:</span>
                <el-input v-model="obj.employeeNum"></el-input>
            </div>
            <div>
                <span>迟到:</span>
                <el-input v-model="obj.late"></el-input>
            </div>
            <div>
                <span>早退:</span>
                <el-input v-model="obj.leaveEarly"></el-input>
            </div>
            <div>
                <span>缺勤:</span>
                <el-input v-model="obj.absence"></el-input>
            </div>
            <div>
                <span>出差:</span>
                <el-input v-model="obj.travelNum"></el-input>
            </div>
            <div>
                <span>请假:</span>
                <el-input v-model="obj.leaveNum"></el-input>
            </div>
            <div>
                <span>出勤:</span>
                <el-input v-model="obj.workNum"></el-input>
            </div>
            <div>
                <span>加班时长:</span>
                <el-input v-model="obj.overtime"></el-input>
            </div>
            <el-button @click="submitData">提交</el-button>
        </el-dialog>

    </div>
</template>

<style scoped>
.header {
    display: flex;
    flex-direction: column;
}

.wrapper {
    display: flex;
    flex-direction: row;
}

.wrapper>div {
    display: flex;
    flex-direction: row;
    margin-right: 1vw;
    gap: 0.5vw;
}

.wrapper>div>span {
    flex: 0 0 auto;
    /* flex-basis: auto; */
    /* flex-shrink: 0; */
}

.w-button {
    display: flex;
    flex-direction: row;
}

.upload-demo {
    margin-left: 10px;
}

.w-button>button {
    margin-right: 1vw;
}
</style>